<template>
  <div class="sc-group-container sc-o-a">
    <FolderTree
      ref="foldersTree"
      node-key="ASSET_LABEL_SEQ"
      :folderType="folderType"
      :filterFolders="filterFolderTree"
      :current-node-key="selectedFolder && selectedFolder.ASSET_LABEL_SEQ"
      :expand-on-click-node="false"
      :highlight-current="true"
      :default-expanded-keys="expandedKeys"
      :auto-expand-parent="true"
      @node-click="handleNodeClick"
      @current-change="handleCurrentChange"
      @loadFolder="handleTreeDataUpdate"
    >
      <template #default="{ node, data }">
        <span
          class="sc-folder-item"
          :class="{
            'is-disabled': data.isDisabled
          }"
          :id="`folder-item-${node.id}`"
        >
          <div class="folder-label">
            <ScIcon
              class="sc-folder-icon"
              :iconClass="data.LABEL_ICON"
            ></ScIcon>
            <span class="nodeLabel">
              {{ data.LABEL_NAME }}
            </span>
          </div>
        </span>
      </template>
    </FolderTree>
  </div>
</template>

<script>
//组件
import FolderTree from "@/components/FolderTree/index.vue";
import { labelTypePrivate, labelTypeTeam } from "@/constant";
function filterFolderTree(tree) {
  return tree.filter(v => {
    if (v.nodeType === "advert") {
      return false;
    }
    return true;
  });
}
export default {
  name: "SelectTree",
  components: {
    FolderTree
  },
  props: {
    selectedFolder: {
      type: Object
    },
    folderType: {
      type: String
    }
  },
  data() {
    return {
      /** 要定位的文件夹 */
      expandedKeys: null,
      folderType: labelTypePrivate
    };
  },
  computed: {
    selectedFolderVm: {
      get() {
        return this.selectedFolder;
      },
      set(newValue) {
        this.$emit("update:selectedFolder", newValue);
      }
    }
  },
  methods: {
    handleNodeClick(data, node) {
      this.$emit("clickFolder", data);
    },
    handleCurrentChange(data, node) {
      this.selectedFolderVm = data;
    },
    addExpandIds(expandIds) {
      if (!this.expandedKeys) {
        this.expandedKeys = [];
      }
      this.expandedKeys.push(...expandIds);
      this.expandedKeys = [...new Set(this.expandedKeys)];
    },
    async handleTreeDataReset() {
      //每次查询都会触发
      await this.$nextTick();
      //重置树后，保留高亮选中
      if (this.selectedFolderVm && this.selectedFolderVm.ASSET_LABEL_SEQ) {
        this.$refs.foldersTree.$refs.elTreeRef &&
          this.$refs.foldersTree.$refs.elTreeRef.setCurrentKey(
            this.selectedFolderVm.ASSET_LABEL_SEQ
          );
      }
    },
    /**
     * 在目录树的数据变更后，修复bug
     */
    async handleTreeDataUpdate({ ASSET_LABEL_SEQ, nodeType }, children) {
      await this.$nextTick();

      this.handleTreeDataReset();
      // 设置权限
      if (this.folderType === labelTypeTeam && children) {
        children.forEach(nodeData => {
          const isDisabled = !["ALL", "RW"].includes(nodeData.PERMIT_CODE);
          this.$set(nodeData, "isDisabled", isDisabled);
        });
      }
    },
    filterFolderTree
  }
};
</script>

<style scoped lang="scss">
</style>